<template>
    <div>
        <el-drawer v-model="showDialog" :show-close="true" size="450px" :modal="false" modal-class="AIdrawer"
            class="AIdrawerWrapper">
            <template #header="{ close, titleId, titleClass }">
                <h5 :id="titleId" :class="titleClass">中国人寿设置</h5>
            </template>
            <div :class="contentBox">
                <el-row>
                    <el-col :span="6" class="text-14px text-#202536 text-end pt-6px">
                        生效方式：
                    </el-col>
                    <el-col :span="18">
                        <el-select v-model="sendTypeValue" placeholder="请选择生效方式" @change="onChangeSendType">
                            <el-option v-for="item in sendType" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>

                    </el-col>
                </el-row>
                <el-row v-if="sendTypeValue === '1'">
                    <el-col :span="6" class="text-14px text-#202536 text-end pt-6px">
                        保司公章：
                    </el-col>
                    <el-col :span="18">
                        <el-upload class="avatar-uploader" ref="upload" :file-list="fileList"
                            :on-change="handleChangeUpload" :on-exceed="handleExceed" :before-remove="handleRemove"
                            :auto-upload="false" accept=".png,.pdf" :limit="1">
                            <img v-if="imageUrl[0]" :src="imageUrl[0]" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon flex flex-col items-center">
                                <Upload />
                                <div class="text-12px text-#9497B1 mt-12px mt--100px">请上传保险公司公章</div>
                            </el-icon>
                        </el-upload>
                        <div class="text-12px text-#9497B1 mt-12px">限8Mb以内，支持png、pdf图片格式</div>
                    </el-col>
                </el-row>
                <el-row v-if="sendTypeValue === '2'">
                    <el-col :span="6" class="text-14px text-#202536 text-end pt-6px">
                        邮箱地址：
                    </el-col>
                    <el-col :span="18">
                        <el-row :gutter="12" class="mb-12px" v-for="(item, i ) in emailList" :key="i">
                            <el-col :span="20">
                                <el-input type="email" v-model="item.email" placeholder="请输入邮箱地址"></el-input>
                            </el-col>
                            <el-col :span="4">
                                <el-button v-if="i === 0" type="" :icon="Plus" @click="onAddEmail" />
                                <el-button v-else type="" :icon="Minus" @click="onMinusEmail(i)" />
                            </el-col>
                        </el-row>
                        <div class="text-12px text-#9497B1 mt-12px">最多可添加10个邮箱地址</div>
                    </el-col>
                </el-row>
                <el-row v-if="sendTypeValue === '2'">
                    <el-col :span="6" class="text-14px text-#202536 text-end pt-6px">
                        发送时间：
                    </el-col>
                    <el-col :span="18">
                        <el-row :gutter="12">
                            <el-col :span="8">
                                <el-select v-model="dayTypeValue" placeholder="请选择">
                                    <el-option v-for="item in dayType" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="16">
                                <el-time-picker class="!w-full" v-model="timeValue" size="normal" placeholder="请选择">
                                </el-time-picker>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6" class="text-14px text-#202536 text-end pt-6px">
                        生效范围：
                    </el-col>
                    <el-col :span="18">
                        <div
                            class="h-30px flex items-center justify-around bg-#F4F4F7 text-14px text-#BAC0CF rounded-4px border-#EAEAEF border-1px border-solid">
                            <span v-for="(item, i) in scopeOfEffect" :key="i">{{ item }}</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6" class="text-14px text-#202536 text-end pt-6px">
                        申请次数：
                    </el-col>
                    <el-col :span="18">
                        <el-select v-model="sendCountValue" value-key="" placeholder="请选择申请次数">
                            <el-option v-for="item in sendCount" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                        <div class="text-12px text-#9497B1 mt-12px">单个客户在同一家保险公司每天可申请的次数</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6" class="text-14px text-#202536 text-end pt-6px">
                        状态：
                    </el-col>
                    <el-col :span="18">
                        <el-radio-group v-model="sendStatusValue">
                            <el-radio v-for="(item, i) in sendStatus" :key="i" :value="item.value">{{ item.label
                                }}</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-row>
            </div>
            <template #footer>
                <div :class="footerBox">
                    <el-button @click="onCancel">取消</el-button>
                    <el-button type="primary" @click="onConfirm">确定</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { Plus, Minus } from '@element-plus/icons-vue'
import { ElMessage, genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    }
})
const emits = defineEmits(['update:show', 'success'])
const footerBox = ref('w-full box-border flex items-center justify-center')
const contentBox = ref('w-full box-border border-t-#EAEAEF border-solid border-1px border-b-none border-x-none px-26px py-24px mt--20px flex flex-col gap-16px')
const upload = ref<UploadInstance>()
const sendTypeValue = ref('')
const sendCountValue = ref('')
const timeValue = ref('')
const fileList = ref([])
const imageUrl = ref([] as any)
const sendStatusValue = ref(1)
const dayTypeValue = ref(1)
const sendType = ref([
    {
        value: '1',
        label: '及时生成'
    },
    {
        value: '2',
        label: '邮件发送'
    },
])
const sendStatus = ref([
    {
        value: 1,
        label: '开启'
    },
    {
        value: 2,
        label: '关闭'
    }
])
const sendCount = ref([
    {
        value: '0',
        label: '不限'
    },
    {
        value: 1,
        label: '1'
    },
    {
        value: 2,
        label: '2'
    },
    {
        value: 3,
        label: '3'
    },
    {
        value: 4,
        label: '4'
    },
    {
        value: 5,
        label: '5'
    },
    {
        value: 6,
        label: '6'
    }
])
const dayType = ref([
    {
        value: 1,
        label: '当天'
    },
    {
        value: 2,
        label: '次日'
    },
])
const emailList = ref([
    { email: '' }
])
const scopeOfEffect = ref(['长期保', '日日保', '团意保'])
const showDialog = ref(false)
const getBase64 = (file: Blob) => {
    return new Promise((resolve, reject) => {
        const reader = new FileReader()
        let fileResult = ''
        reader.readAsDataURL(file)
        //开始转
        reader.onload = function () {
            fileResult = reader.result as any
        }
        //转 失败
        reader.onerror = function (error) {
            reject(error)
        }
        //转 结束  咱就 resolve 出去
        reader.onloadend = function () {
            resolve(fileResult)
        }
    })
}
const handleRemove: UploadProps['onRemove'] = (file, fileList) => {
    imageUrl.value = []
}
const handleExceed: UploadProps['onExceed'] = async (files) => {
    imageUrl.value = []
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    console.log(file, 'shgghuj')
    file.uid = genFileId()
    upload.value!.handleStart(file)
    imageUrl.value.push(await getBase64(file))
}
const handleChangeUpload = async (file: { size: number; raw: Blob }) => {
    console.log(2121111, file)
    const num = file.size / 1024 / 1024
    if (num > 8) {
        ElMessage.warning('图片大小不能超过8M')
        upload.value!.clearFiles()
        return
    }
    imageUrl.value.push(await getBase64(file.raw))
    await getBase64(file.raw)
    return false
}
const onAddEmail = () => {
    if (emailList.value.length >= 10) {
        ElMessage.warning('最多只能添加10个邮箱')
        return
    }
    emailList.value.push({ email: '' })
}
const onMinusEmail = (i: number) => {
    emailList.value.splice(i, 1)
}
const onCancel = () => {
    imageUrl.value = []
    upload.value!.clearFiles()
    showDialog.value = false
}
const onChangeSendType = (val: number | string) => {
    console.log(val, 'fasguyhfgyu')
    if (val === '1') {
        dayTypeValue.value = 1
        timeValue.value = ''
        emailList.value = [{ email: '' }]
    }
    if (val === '2') {
        upload.value!.clearFiles()
        imageUrl.value = []
    }
}
const onConfirm = () => {
    console.log(111)
    onCancel()
    showDialog.value = false
}
watch(() => props.show, (newval) => {
    showDialog.value = newval
})

watch(showDialog, (newval) => {
    emits('update:show', newval)
})
</script>
<style lang="scss" scoped>
.AIdrawerWrapper {
    margin-left: auto;
}

:deep(.AIdrawer) {
    margin-left: auto;
    width: 0px;
}


.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

:deep(.avatar-uploader .el-upload) {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>